<template>
    <div>
      <NoSearch v-show="files.length == 0"></NoSearch>
          <el-card v-for="(file,index) in files" :key="index" shadow="never" v-show="files.length != 0">
            <el-col :span="6">
              <div class="file-type">
                {{file.file_name.split(".")[1]}}
              </div>
            </el-col>
            <el-col :span="14">
              <div class="file-title">{{file.name}}</div>
            </el-col>
            <el-col :span="4">
              <span class="file-create-time">
                {{file.create_time}}
              </span>
              <el-button class="download-button" @click="downloadFile(file.id, file.file_name)">立即下载</el-button>
            </el-col>
          </el-card>
    </div>
</template>

<script>
    import NoSearch from "./NoSearch";
    export default {
        name: "SearchFile",
      components: {NoSearch},
      data() {
          return{
            searchName: '',
            files: [],
            // 分页对象
            page:{
              total: 0,// 总记录数
              size: 5,// 每页显示条数，默认为5
              current: 1,// 当前页码
              pages: 0// 总页数
            }
          }
      },
      methods: {
        pageGetData(currentPage, pageSize) {
          this.$http.get("http://localhost:9999/siji/file/page/" + currentPage + "/" + pageSize + "?name=" + this.searchName,{
            headers: {
              token: window.localStorage.getItem("userToken")
            }
          }).then(resp => {
            if (resp.data.code === 200 ) {
              this.files = resp.data.data.records
              this.page.size = resp.data.data.size
              this.page.total = resp.data.data.total
              this.page.current = resp.data.data.current
              this.page.pages = resp.data.data.pages
            }
          })
        },
        // 下载文件
        downloadFile(fileId, fileName) {
          this.$http({
            url: 'http://localhost:9999/siji/file/download/' + fileId,
            method: 'post',
            responseType: 'arraybuffer'
          }).then((res) => {
            let url = window.URL.createObjectURL(new Blob([res.data]))
            let a = document.createElement('a')
            a.setAttribute("download",fileName)
            a.href = url
            a.click();
          })
        },
      },
      created() {
        this.searchName = this.$route.params.name
        this.pageGetData(1,5)
      }
    }
</script>

<style scoped>
  .file-title{
    line-height: 75px;
    font-family: pingfang-x;
    font-weight: 800;
    font-size: 18px;
  }
  .download-button{
    margin-top: 10px;
    font-family: pingfang-x;
    background-color: #0066ff;
    color: white;
    margin-bottom: 10px;
  }
  .file-type{
    text-align: center;
    line-height: 60px;
    color: white;
    font-family: pingfang-x;
    font-weight: 600;
    border-radius: 5px;
    width: 50px;
    height: 60px;
    background: linear-gradient(135deg, transparent 10px, #2A6AB4 0);
  }

  .file-create-time{
    font-size: 13px;
  }
</style>
